@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  svg {
    @apply inline;
  }
}

@layer components {
  .btn-preset {
    @apply rounded-lg font-bold transition duration-300 hover:text-white hover:shadow active:shadow-none;
  }
  .btn-layout {
    @apply px-2 py-1;
  }
  .btn-base {
    @apply btn-preset bg-gray-200 text-gray-800 dark:bg-zinc-600;
  }
  .btn-safe {
    @apply btn-preset bg-emerald-100 text-emerald-500 hover:bg-emerald-500;
  }
  .btn-danger {
    @apply btn-preset bg-red-100 text-red-500 hover:bg-red-500;
  }
  .btn-primary {
    @apply btn-preset bg-[#e3e2fe] text-[#5b57d1] hover:bg-[#6965db];
  }
}

@layer utilities {
  .hover-shadow {
    @apply transition-shadow duration-300 hover:shadow active:shadow-none;
  }
}

.form-tick:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}

.leave-to,
.enter-form {
  transform: perspective(400px) rotateY(3deg);
}
